<script setup>
//1.导入对应的生命周期钩子
import { ref, onBeforeMount, onBeforeUpdate, onMounted, onUpdated } from 'vue'
console.log('setup')
onBeforeMount(() => {
  console.log('onBeforeMount')
})
onMounted(() => {
  console.log('onMounted1')
})
onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})
onUpdated(() => {
  console.log('onUpdated')
})
//变化：生命周期钩子可以多次调用
onMounted(() => {
  console.log('onMounted2') 
})
const count = ref(0)

</script>
<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="count++">count++</button>
  </div>
</template>

<style lang="scss" scoped>

</style>